<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>演示jQuery的使用</title>
		<style type="text/css">
			.input_text{
				color: red;
			}
			#spanElement{
				color: red;
			}
			#divSet{
				height: 300px;
				border: #000000 solid 1px;
				width: 500px;
			}
			#divInner{
				height: 100px;
				width: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<input type="text" id="txtUsername" name="username" class="input_text" value="文本框的文字" />
		<input type="button" value="点击选取元素" onclick="selectElement()" />
		<input type="button" value="点击设置元素" onclick="setElement()" />
		<input type="button" value="点击设置元素样式" onclick="setClass()" />
		
		<input type="button" value="显示或隐藏divSet" onclick="setView()" />
		<div id="divResult">
			操作结果:选中的元素value是<span id="spanElement"></span>
		</div>
		
		<div id="divSet">
			这里是大div
		</div>
	
		
		<div id="divInner">小div</div>
		
		<input type="button" value="被绑定了click事件" id="btn1" />
		
		<input type="button" value="被绑定了dblclick事件" id="btn2" />
		
		<input type="button" value="遍历所有的div" onclick="eachDiv()"/>
		<script src="jquery1.11.1.js"></script>
		<script type="text/javascript">
			// 选取元素
			function selectElement(){
				var ele;
				// 选中id为txtUsername的元素.只选中一个
				// ele = $("#txtUsername");
				
				// 选中标签名为input的元素。可选中多个
				// ele = $("input");
				
				// 选中css类为input_text的元素。可选中多个
				// ele = $(".input_text");
				
				
				// jQuery元素对象的val()方法可以得到元素的value属性
				var txt = ele.val();
				// 设置spanElement中的文字.相当于innerText
				$("#spanElement").text(txt)
			}
			
			// 操作元素
			function setElement(){
				var divSet = $("#divSet");
				var divInner = $("#divInner");
				// 设置或获取元素内的文字
				//divSet.text("<h3>这里的表演很精彩</h3>");
				
				// 设置或获取元素内的html
				//divSet.html("<h2>临兵斗者皆阵列在前</h2>")
				
				// 向元素内追加元素节点.此操作会把被追加的节点移动到元素内
				// divSet.append(divInner);
				
				// 此操作会把元素移动到指定元素节点内
				// divInner.appendTo(divSet);
				
				// 把指定元素节点放在元素内的第一个位置
				// divSet.prepend(divInner);
				// 把元素移动到指定元素内的第一个位置
				// divInner.prependTo(divSet);
				
				// 把指定节点divInner移动到当前元素节点divSet前
				// divSet.before(divInner);
				// 把divSet节点移动到当前元素节点divInner后
				// divInner.after(divSet);
				
				// 克隆当前节点并选中克隆节点
				// var cloneInner = divInner.clone();
				// 把cloneInner加到divSet节点中
				// divSet.append(cloneInner);
			}
			
			function setClass(){
				var divSet = $("#divSet");
				// 访问指定的css样式
				// alert(divSet.css("border"));
				// alert(divSet.css("border-width"));
				// 设置指定的css样式
				// divSet.css("border-width", "3px");
				
				// 获取divSet的计算宽高
				// alert("divSet的宽高为:" + divSet.width() + ":" +divSet.height());
				 
				
			}
			
			
			function setView(){
				var divSet = $("#divSet");
				// 定义变量设置显示或隐藏元素花费的时间.单位以毫秒计算
				// 或者使用设定好的值 "slow","normal", or "fast"
				// var speed = 1000;
				// if(divSet.css("display") == "none"){
					// 显示元素。默认无参数。直接显示
					// divSet.show();
					// divSet.show(speed);
				// }else{
					// 隐藏元素。默认无参数。直接隐藏
					// divSet.hide();
					// divSet.hide(speed);
				// }
				
				// 以指定速度升起元素
				// divSet.slideUp(1000);
				
				// 以指定速度降下元素
				// divSet.slideDown(1000);
				
				// 切换指定元素的显示状态
				// divSet.slideToggle(1000);
				
				// 所有选中元素使用指定时间淡出页面
				// divSet.fadeOut(1000);
				// 所有选中元素使用指定时间淡入页面
				// divSet.fadeIn(2000);
				// 所有选中元素使用指定时间调整到指定透明度(透明度最高为1为不透明。最低为0.透明)
				// divSet.fadeTo(1000, 0.26);
				
				// 使用指定时间把选中的所有元素改变为指定样式
				 divSet.animate({ 
				    width: "700px",
				    height: "500px", 
				    fontSize: "10em", 
				    borderWidth: 10
				  }, 11000);
			}
			
			// 为id为btn1的元素绑定click事件
//			$("#btn1").click(function(){
//				alert("btn1的点击事件");
//			});
//			// 为id为btn2的元素绑定双击事件
//			$("#btn2").dblclick(function(){
//				alert("btn2的双击事件");
//			})
//			// 把匹配到的所有元素都绑定click事件
//			$("input").click(function(){
//				alert("大家一起绑单击。");
//			})
			
			// 遍历所有的div
			function eachDiv(){
				$("div").each(function(){
					alert("现在遍历到的是" + this.id);	
				})
				
			}
			
		</script>
	</body>
</html>
